<template>
  <div>
    <div style="text-align: left; margin: 0 10px 5px 0">
      <el-button size="mini" :type="searchParams.orderStatus === 0 ? 'info' : ''"
                 @click="getOrderList( )">
        全部订单
      </el-button>
      <el-button size="mini" :type="searchParams.orderStatus === statusMap.NotPay ? 'info' : ''"
                 @click="getOrderList(statusMap.NotPay )">
        未付款
      </el-button>
      <el-button size="mini" :type="searchParams.orderStatus === statusMap.WaitSend ? 'warning' : ''"
                 @click="getOrderList(statusMap.WaitSend )">
        待发货
      </el-button>
      <el-button size="mini" :type="searchParams.orderStatus === statusMap.WaitTake ? 'info' : ''"
                 @click="getOrderList(statusMap.WaitTake )">
        待收货
      </el-button>
      <el-button size="mini" :type="searchParams.orderStatus === statusMap.Finished ? 'success' : ''"
                 @click="getOrderList(statusMap.Finished )">
        已完成
      </el-button>
      <el-button size="mini" :type="searchParams.orderStatus === statusMap.Refunding ? 'info' : ''"
                 @click="getOrderList(statusMap.Refunding )">
        退款
      </el-button>
    </div>

    <!--订单取消并退款-->
    <el-dialog title="退款取消订单" :visible.sync="flagShowOrderRefund">
      <div>
        <el-checkbox v-for="(goods,index) in curOrder.goodsList" :key="index"
                     :disabled="goods.refundNo!=null&&goods.refundNo!==''"
                     v-model="refundGoodsMap[index]">
          {{ goods.name }}
        </el-checkbox>
      </div>
      <el-input type="textarea" v-model="refundReason" placeholder="输入退款的原因..."></el-input>
      <div style="margin: 10px">
        <el-button @click="refundReason = '库存不足'" size="mini">库存不足</el-button>
        <el-button @click="refundReason = '用户要求取消'" size="mini">用户要求取消</el-button>
        <el-button @click="refundReason = '商品损坏'" size="mini">商品损坏</el-button>
        <el-button @click="refundReason = '配送失败'" size="mini">配送失败</el-button>
        <el-button @click="refundReason = '其他'" size="mini">其他</el-button>
      </div>
      <el-button type="primary" @click="confirmRefundOrder">确定取消并退款</el-button>
    </el-dialog>

    <!--列表-->
    <el-table :data="orderList" :default-sort="{prop: 'createTime', order:'descending'}">
      <el-table-column label="订单号" prop="orderNo" sortable></el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <span :style="{color: statusColorMap[scope.row.orderStatus]}">
            {{ statusCNMap[scope.row.orderStatus] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="微信交易号" prop="wxPayTransactionId" show-overflow-tooltip></el-table-column>
      <el-table-column label="取餐方式">
        <template slot-scope="scope">
          {{ scope.row.takeType === 1 ? "外卖配送" : "到店自取" }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址" prop="addressDetail"></el-table-column>
      <el-table-column label="商品列表" width="170px">
        <template slot-scope="scope">
          <div v-for="(goods,index) in scope.row.goodsList" :key="index"
               style=" font-size:10px; line-height:15px; border-bottom:1px solid #d2cccc">
            {{ goods.name }} ￥{{ goods.price / 100 }} x{{ goods.count }}
            <div v-if="goods.refundNo">
              <div style="color:red">{{ goods.refunded ? '已退款' : "退款中" }}</div>
              退款号：{{ goods.refundNo }}
              <div v-if="goods.refundReason">
                退款原因： {{ goods.refundReason }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="总价格">
        <template slot-scope="scope">
          ￥{{ scope.row.totalPrice / 100 }}实付{{ scope.row.payPrice / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" prop="createTime" sortable>
        <template slot-scope="scope">
          {{ $dateUtil.fmtDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="支付时间" prop="payTime" sortable>
        <template slot-scope="scope">
          {{ $dateUtil.fmtDate(scope.row.payTime) }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="userPhone"></el-table-column>
      <el-table-column label="取餐人" prop="receiver"></el-table-column>
      <el-table-column label="备注" prop="extraInfo" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" v-if="scope.row.orderStatus === statusMap.NotPay"
                       @click="operateOrder(1, scope.row)">
              删除
            </el-button>
          </div>
          <div style="margin-top: 3px;">
            <el-button type="warning" size="mini" v-if="scope.row.orderStatus === statusMap.WaitSend"
                       @click="operateOrder(2, scope.row)">
              发货
            </el-button>
          </div>
          <div style="margin-top: 3px;">
            <el-button size="mini"
                       v-if="scope.row.orderStatus === statusMap.WaitSend || scope.row.orderStatus ===statusMap.WaitTake"
                       @click="operateOrder(3, scope.row)">
              退款
            </el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <!--分页组件-->
    <el-row style="float: right">
      <el-pagination
          @current-change="changePageNo"
          @size-change="changePageSize"
          :current-page.sync="searchParams.pageNo"
          :page-size.sync="searchParams.pageSize"
          :page-sizes="[5, 10, 20, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>

  </div>
</template>

<script>
import * as orderAdminApi from "../../api/orderAdminApi.js";
import config from "../../../config"

export default {
  name: "orderAdmin",
  data() {
    return {
      statusMap: config.orderStatus, // 订单状态常量
      statusCNMap: {
        1: '未支付',
        2: '待发货',
        5: '待收货',
        10: '已完成',
        11: '退款中',
        12: '已退款'
      },
      statusColorMap: {
        1: "black",
        2: "orange",
        5: "black",
        10: "green",
        11: "red",
        12: "red",
      },
      // 查询参数
      searchParams: {
        pageNo: 1,
        pageSize: 10,
        orderStatus: 0
      },
      total: 0,
      orderList: [],
      curOrder: {},
      flagShowOrderRefund: false,
      refundGoodsMap: [], // 要退款的商品
      refundReason: '', // 退款原因
    }
  },
  mounted() {
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList(orderStatus = 0) {
      this.searchParams.orderStatus = orderStatus
      orderAdminApi.getOrderList({
        ...this.searchParams,
        success: res => {
          this.orderList = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 切换页数
    changePageNo(pageNo) {
      this.searchParams.pageNo = pageNo;
      this.getOrderList(this.searchParams.orderStatus)
    },
    // 改变页面大小
    changePageSize(pageSize) {
      this.searchParams.pageSize = pageSize;
      this.getOrderList(this.searchParams.orderStatus)
    },
    // 操作订单
    operateOrder(command, orderInfo) {
      if (command === 1) { // 删除订单
        let minutes = Math.floor((new Date().getTime() - orderInfo.createTime) / 1000 / 60)
        this.$msgbox.confirm(`该用户已经下单${minutes}分钟还未付款，是否删除订单: ${orderInfo.orderNo}`).then(() => {
          orderAdminApi.updateOrderStatus({
            orderNo: orderInfo.orderNo,
            command: 1,
            success: () => {
              this.getOrderList(this.searchParams.orderStatus)
            }
          })
        }).catch(() => {
        })
      } else if (command === 2) {  // 发货
        orderAdminApi.updateOrderStatus({
          orderNo: orderInfo.orderNo,
          command: 2,
          success: () => {
            this.getOrderList(this.searchParams.orderStatus)
          }
        })
      } else if (command === 3) { // 取消并退款
        this.curOrder = orderInfo
        this.flagShowOrderRefund = true
        this.refundReason = ""
        this.refundGoodsMap = new Array(orderInfo.goodsList.length).fill(false)
      }
    },
    // 确认退款订单
    confirmRefundOrder() {
      this.refundReason = this.refundReason.trim()
      if (this.refundReason === "") {
        this.$message.error("请填写退款原因")
        return
      }
      console.log(this.refundGoodsMap)
      orderAdminApi.updateOrderStatus({
        orderNo: this.curOrder.orderNo,
        command: 3,
        refundReason: this.refundReason,
        refundGoodsMap: this.refundGoodsMap,
        success: () => {
          this.flagShowOrderRefund = false
          this.getOrderList(this.searchParams.orderStatus)
        }
      })
    }
  }
}
</script>
